<template>
    <el-dialog :visible.sync="showDialog" width="650px" class="sign-dialog">
        <el-tabs v-model="activeName">
            <el-tab-pane label="签名绘制" name="first">
                <div class="esign-content">
                    <vue-esign ref="esign" :width="610" :height="240" :isCrop="isCrop" :lineWidth="lineWidth"  :lineColor="lineColor" />
                </div>
                <div class="esign-config">
                    <div class="config-color">
                    画笔颜色：
                    <p class="current-color" :style="`background-color:${lineColor}`" @click="showColorPicker = !showColorPicker" ></p>
                    <SketchPicker class="SketchPicker" v-if="showColorPicker" v-model="color" />
                    </div>
                    <div class="config-width">
                    画笔粗细：
                    <el-select
                        v-model="lineWidth"
                        class="select-width"
                        size="mini"
                    >
                        <el-option
                        v-for="item in lineWidthList"
                        :key="item"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select>
                    </div>
                    <div>
                        <el-button  @click="$refs.esign.reset()" size="small">清空画板</el-button>
                        <el-button size="small" @click="showDialog = false">取消</el-button>
                        <el-button size="small" type="primary" @click="handleGenerate">确定添加</el-button>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="签名上传" name="second">
                <DragUpload   text="上传个人签名/个人名章" :maxSize="2"/>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>
<script>
import vueEsign from 'vue-esign'
import { Sketch } from 'vue-color'
import { createSign } from '@/api/sign'
import DragUpload from '@/components/Upload/DragUpload'
import { Button, Dialog, TabPane, Tabs, Select, Option, Upload } from 'element-ui'
export default {
  components: {
    DragUpload,
    vueEsign,
    SketchPicker: Sketch,
    ElButton: Button,
    ElDialog: Dialog,
    ElTabs: Tabs,
    ElTabPane: TabPane,
    ElSelect: Select,
    ElOption: Option,
    ElUpload: Upload
  },
  props: {
    showSign: {
      type: Boolean,
      default: false
    },
    signUploadOption: {
      type: Object,
      default: () => {
        return {
          accept: 'image/png,image/jpeg,image/gif',
          drag: true,
          multiple: false,
          action: '',
          data: {}
        }
      }
    }
  },
  data () {
    return {
      activeName: 'first',
      lineWidth: 6,
      lineWidthList: [4, 6, 8, 10, 12],
      isCrop: false,
      showColorPicker: false,
      color: {
        a: 1,
        hex: '#000000',
        hex8: '#000000FF',
        hsl: {
          a: 1,
          h: 0,
          l: 0,
          s: 0
        },
        hsv: {
          a: 1,
          h: 0,
          s: 0,
          v: 0
        },
        oldHue: 0,
        rgba: {
          a: 1,
          b: 0,
          g: 0,
          r: 0
        }
      }
    }
  },
  computed: {
    lineColor () {
      const { a, b, g, r } = this.color.rgba
      return `rgba(${r},${g},${b},${a})`
    },
    signElUploadOption: {
      get () {
        const signUploadOption = {...this.signUploadOption}
        signUploadOption.action = process.env.BASE_API + this.signUploadOption.action
        // signUploadOption.action = 'http://dxcrm-api.com:8081/api' + this.signUploadOption.action
        return signUploadOption
      }
    },
    showDialog: {
      get () {
        return this.showSign
      },
      set (val) {
        this.$emit('update:showSign', val)
      }
    }
  },
  watch: {
    color: {
      handler () {
        this.showColorPicker = false
      }
    }
  },
  methods: {
    // 生成base64格式并保存
    handleGenerate () {
      this.$refs.esign.generate().then(base64 => {
        const { action, data } = this.signUploadOption
        createSign(action, {data: data, file: base64}).then(res => {
          this.$emit('onsuccessSign', res)
          this.showDialog = false
        }).catch(err => {
          this.$emit('onerrorSign', err)
          console.error(err)
        })
      }).catch(err => {
        console.error(err)
      })
    },
    onSuccess (res) {
      this.$emit('onsuccessSign', res)
      this.showDialog = false
    },
    onError (err) {
      this.$emit('onerrorSign', err)
    }
  }
}
</script>
<style lang="scss" scoped>
.esign-container{
  width: 550px;
}
.esign-content{
  border: 2px solid #E6E6E6 ;
  background-color: white;
  margin-bottom: 15px;
}
.esign-config{
  display: flex;
  .config-color{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    margin-right: 10px;
    .current-color{
      width: 16px;
      height: 16px;
      border-radius: 3px;
    //   box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%)
    }
    .SketchPicker{
      position: absolute;
      bottom: 30px;
      left: 76px;
    }
  }
  .config-width{
    display: flex;
    align-items: center;
    width: 250px;
    .select-width{
      width: 80px;
    }
  }
}

</style>
<style lang="scss" scoped>
.sign-upload{
    .el-upload{
        width: 100%;
        .el-upload-dragger{
            width: 100%;
        }
    }
}
.sign-dialog .el-dialog__header{
    padding: 0;
}
</style>
